<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<!--
过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
		-->
<body>
<!--    准备好一个容器-->
<div id="root">
    <h2>显示格式化后的时间戳</h2>
<!--    计算属性实现-->
    <h3>现在是：{{fmtTime}}</h3>

<!--methods实现-->
    <h3>现在是：{{getFmtTime()}}</h3>

<!--    过滤器时间-->
    <h3>现在是：{{time | timeFormater}}</h3>
<!--    传参   第一个time就是value ,第二个是 str-->
    <h3>现在是：{{time | timeFormater('YYYY年MM月DD日')}}</h3>
</div>
<script>
    Vue.config.productionTip = true

    new Vue({
        el:"#root",
        data:{
            //时间搓
            time: 1621561377603,
        },
    //    计算属性
        computed:{
            fmtTime(){
                // 不传的话就是当前时间
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        methods:{
            getFmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },

    //    过滤器
        filters:{
            timeFormater(value,str){
                // console.log('@',value)
                return dayjs(value).format(str)
            }
        }

    })
</script>
</body>
</html>